<!DOCTYPE html>
<html>
  <head>
    <title>kthoom Comic Reader</title>
    <link rel="stylesheet" href="kthoom.css" type="text/css"/>
    <link rel="icon" type="image/png" href="images/logo.png"/>
    <script type="application/javascript" src="kthoom-google.js"></script>
    <script type="application/javascript" src="kthoom.js"></script>
    <script type="application/javascript" src="bitjs/archive.js"></script>
    <script id="google"
        src="https://apis.google.com/js/client.js?onload=kthoom.google.boot"
        onerror="window.onload=kthoom.google.boot" async></script>
  </head>
  <body onload="init()">
    <div class="background">
      <object id="logo" type="image/svg+xml" data="images/logo.svg" width="100%">kthoom logo</object>
    </div>
    <div class="foreground">
	    <div id="header">
        <div id="menu">
          <a id="menu-open" class="menuButton" href="#">Open</a>
          <ul class="menuItems">
            <li>
              <a id="menu-open-local-files"href="#">
                <input id="menu-open-local-files-input" type="file" multiple>
                Local Files
              </a>
            </li>
            <li>
              <a id="menu-open-google-drive" href="#">
                Google Drive
              </a>
            </li>
          </ul>
        </div>
	      <div id="progress" class="hide"></div>
	      <div id="nav" class="hide">
		      <button id="prevBook" title="Previous Book ([)" type="button" onclick="loadPrevBook()">&lt;&lt;</button>
		      <button id="prev" title="Previous Page (Left Arrow)" type="button" onclick="showPrevPage()">&lt;</button>
		      <!--<span id="pageCounter">Page X/Y</span>-->
		      <button id="toolbarbutton" title="Minimize Toolbar" type="button" onclick="toggleToolbar()">-</button>
		      <button id="next" title="Next Page (Right Arrow)" type="button" onclick="showNextPage()">&gt;</button>
		      <button id="nextBook" title="Next Book (])" type="button" onclick="loadNextBook()">&gt;&gt;</button>
		      <!--<img id="close" title="Close Book (X)" onclick="closeBook()" src="images/cancel.png" tabIndex="3"/>-->
	      </div>
	    </div>
	    <div id="mainContent">
	      <div id="mainText" style="display:none"></div>
      	<canvas id="mainImage"></canvas>
	    </div>
      <div id="library">
        <div id="libraryTab" title="Library">
          <svg stroke="currentColor" stroke-width="2" width="30" height="50">
            <line x1="11" y1="14" x2="11" y2="36" />
            <line x1="15" y1="14" x2="15" y2="36" />
            <line x1="19" y1="14" x2="19" y2="36" />
          </svg>
        </div>
        <div id="libraryContents"></div>
      </div>
    </div>
    <div id="overlay" style="display:none">
      <h1>Keyboard Shortcuts</h1>
      <dl class="helplist">
      	<dt>?</dt>
        <dd>Show/hide this help screen</dd>

      	<dt>Left</dt>
        <dd>Go to previous page</dd>

      	<dt>Right</dt>
        <dd>Go to next page</dd>

      	<dt>[</dt>
        <dd>Load previous book</dd>

      	<dt>]</dt>
        <dd>Load next book</dd>

      	<dt>O</dt>
        <dd>Open local file(s)</dd>

        <dt>G</dt>
        <dd>Open a file from Google Drive</dd>

      	<dt>L</dt>
        <dd>Rotate left / counter-clockwise</dd>

      	<dt>R</dt>
        <dd>Rotate right / clockwise</dd>

      	<dt>H</dt>
        <dd>Scale to height</dd>

      	<dt>W</dt>
        <dd>Scale to width</dd>

      	<dt>B</dt>
        <dd>Best fit mode</dd>

        <dt>X</dt>
        <dd>Show/hide toolbars</dd>
      </dl>
    </div>
  </body>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-8244614-4', 'auto');
    ga('send', 'pageview');
  </script>
</html>
